<!--  -->
<template>
  <div class="main">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>查询信息</span>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-input size="small" v-model="search.name" placeholder="请输入姓名"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-date-picker
                size="small"
                v-model="search.startTime"
                type="date"
                placeholder="选择入学日期"
                value-format="yyyy-MM-dd"
              >></el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-date-picker
                size="small"
                v-model="search.endTime"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
              >></el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <el-select size="small" v-model="search.classId" placeholder="请选择班级">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select size="small" v-model="search.dormId" placeholder="请选择宿舍">
              <el-option
                v-for="item in dormLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" :offset="12" class="btns">
            <el-button size="small" @click="removeSearch">重置</el-button>
            <el-button size="small" type="primary" @click="toSearch">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card card2" v-loading="loading" shadow="never">
      <div slot="header" class="clearfix">
        <span>学员信息</span>
        <el-button style="float:right" type="primary" @click="addStudent" size="small">新增</el-button>
      </div>
      <div>
        <el-table :data="studentList" border style="width: 100%">
          <el-table-column fixed prop="addTime" label="日期" width="200"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="sexv" label="性别" width="120"></el-table-column>
          <el-table-column prop="cityText" label="市区" width="200"></el-table-column>
          <el-table-column prop="tel" label="电话" width="120"></el-table-column>
          <el-table-column prop="classname" label="班级" width="120"></el-table-column>
          <el-table-column prop="dormname" label="宿舍" width="120"></el-table-column>
          <el-table-column prop="dormStartTime" label="入校日期" width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <el-button size="small">查看</el-button>

              <el-button type="primary" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="removeStudent(scope.row.id)"
              >删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.start"
          :page-sizes="page.sizes"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.pages"
          class="step"
        ></el-pagination>
      </div>
    </el-card>
    <Details ref="details" @Refresh="refres" :classList="classList" :dormLists="dormLists"></Details>
  </div>
</template>

<script>
import Details from "./Details";
const _ = require("lodash");
const host = require("@/settings.js");
import {
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import {
  studentList,
  studentSave,
  studentDetails,
  studentUpdate,
  removeStudentList,
} from "@/api/students/studentList";
import { classList } from "@/api/students/classList";
import { dormList } from "@/api/students/dormList";
export default {
  name: "Mstudent",
  components: {
    Details,
  },
  data() {
    return {
      cardPad: { padding: "10px" },
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        pages: 0,
      },
      search: {},
      search2: {},
      classList: [],
      dormLists: [],
      studentList: [],
      loading: false,
    };
  },
  created() {
    this.init();
    this.initClassList();
    this.initDorm();
  },
  methods: {
    removeStudent(id) {
      var that = this;
      this.$confirm("确定要删除吗", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "算了兄弟",
      })
        .then(() => {
          removeStudentList({ id: id }).then((res) => {
            console.log(res);
            if (res.code == true) {
              this.$message({
                type: "success ",
                message: `删除成功`,
              });
              that.init();
            }
          });
        })
        .catch((action) => {});
    },
    refres() {
      this.page.start=1
      this.init();
    },
    initDorm() {
      dormList({
        start: 1,
        limit: 99,
      }).then((res) => {
        console.log(res);
        this.dormLists = res.data.list;
      });
    },

    addStudent() {
      // console.log(this.$refs.details);
      this.$refs.details.open();
      this.$refs.details.removeList();
    },
    removeSearch() {
      this.search = {};
      this.search2 = {};
      this.init();
    },
    handleSizeChange(e) {
      this.page.limit = e;
      this.init();
    },
    handleCurrentChange(e) {
      this.page.start = e;
      this.init();
    },
    handleClick(id) {
      this.$refs.details.openDetails(id);
    },
    initClassList() {
      classList({
        start: 1,
        limit: 99,
      }).then((res) => {
        this.classList = res.data.list;
      });
    },
    init() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search2,
      };
      // params=_.pickBy(params,item=>item)
      this.loading = true;
      studentList(params).then((res) => {
        console.log(res);
        this.studentList = res.data.list;
        this.page.pages = res.data.totalRow;
        this.loading = false;
      });
    },
    toSearch() {
      console.log(this.search);
      this.search2 = _.pickBy(this.search, (item) => item);
      this.page.start = 1;
      this.init();
    },
  },
};
</script>

<style  lang='scss' scoped >
.main {
  padding: 20px;
  .box-card {
    border: 0;
    .el-row {
      ::v-deep .el-input__inner {
        width: 220px;
      }
    }
    .el-row:nth-child(2) {
      margin-top: 30px;
    }
    .btns {
      width: 250px;
      text-align: right;
    }
  }
  .card2 {
    margin-top: 50px;
    .step {
      margin-top: 20px;
      text-align: right;
    }
  }
  .popa {
    .el-form-item__label {
      font-weight: normal;
      font-size: 50px;
    }
    .el-card {
      margin-bottom: 30px;
    }
  }
}
</style>
